<template>
  <el-card
    class="box-card"
    shadow="hover"
    :body-style="{ padding: '15px', height: '280px' }"
  >
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">最新资讯</span>
        <span class="rjfl-more" @click="gotoInfo"
          >更多
          
        </span>
      </div>
    </template>
    <div class="zxrq">
      <div class="zx" v-for="(it, i) in data" :key="i">
        <span @click="gotoInfoList()">[{{ it.thirdStageName }}]</span>
        <span @click="gotoInfoDetail(it.id)" :title="it.title">{{ it.title }}</span>
        <span>{{ it.createTime }}</span>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter()
const route = ref(useRoute());
defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const goto =ref({
  '单机游戏':{url:'/game/alone-list.html',type:{type:397},name:'game-alone-ist'},
  '手机游戏':{url:'/game/mobile-list.html',type:{type:10}},
  '网页游戏':{url:'/game/web-list.html',type:{type:100},name:'game-web-list'},
  '网络游戏':{url:'/game/alone-list.html',type:{type:397},name:'game-alone-ist'},
})
const gotoInfoDetail = (id) => {
  router.push({
    name: "information-detail",
    params: { id: id },
  });
};
const gotoInfo = () => {
  router.push({
    name: "information",
  });
};
const gotoInfoList = ()=>{
  router.push({
    name: "information-list",
    params:{
      firstId: "386",
      secondId: "415",
      thirdId: "493",
      param:'386_415_493',
      type: "493",
    }
  });
}
// const it = ref({
//   name: "梦想世界",
//   icon: "https://placeholder.idcd.com/?w=72&h=72&text=72x72",
//   id: "",
// });
</script>

<style lang="less" scoped>
.zxrq {
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
  width: 100%;
}
.zx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // margin: auto 0px;
  span:first-child {
    font-size: 14px;
    font-weight: 400;
    color: #93999e;
    line-height: 14px;
    cursor: pointer;
    &:hover {
      color: @link-color;
    }
  }
  span:nth-child(2) {
    margin: 0 10px;
    font-size: 14px;
    font-weight: 400;
    color: #1d2127;
    line-height: 14px;
    cursor: pointer;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    &:hover {
      color: @link-color;
      // text-decoration: underline;
    }
  }
  span:last-child {
    font-size: 14px;
    font-weight: 400;
    color: #93999e;
    line-height: 14px;
  }
}
.rjfl {
  display: flex;
  justify-content: space-between;
}
.rjfl-title {
  font-size: 20px;
  font-weight: 600;
  color: #1d2127;
  line-height: 20px;
}

.rjfl-more {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #545759;
  line-height: 16px;
  cursor: pointer;
}
</style>
